<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:converge="http://com.interactivemediamanagement.converge/tags">

    <h:panelGroup id="pgConceptSelector">
        <rich:modalPanel id="mpConceptSelector" autosized="true" domElementAttachment="parent">
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="#{msgs.concepts_SELECT_META_DATA}" />
                </h:panelGroup>
            </f:facet>
            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage id="imgCloseMetaDataSelect" value="#{res.DIALOGUE_CLOSE_ICON}" style="link" />
                    <rich:componentControl for="mpConceptSelector" attachTo="imgCloseMetaDataSelect" operation="hide" event="onclick"/>
                </h:panelGroup>
            </f:facet>

            <h:panelGrid id="pgMetaDataSelect" style="width: 480px;">

                <rich:tabPanel id="tpMetaDataSelect" switchType="client" activeTabClass="tabActive" inactiveTabClass="tabInactive">
                    <rich:tab id="tabSubjects" label="#{msgs.concepts_SUBJECTS}">

                        <h:panelGrid id="pgSubjects" columnClasses="tabSheet" style="padding: 10px; width: 100%">
                            <h:panelGroup styleClass="scrollableContent" layout="block">
                                <rich:tree switchType="ajax" ajaxSingle="true" ajaxSubmitSelection="true" nodeSelectListener="#{mediaItemDetails.onSelectSubject}" reRender="dtConcepts">
                                    <rich:recursiveTreeNodesAdaptor roots="#{common.parentSubjects}" var="item" nodes="#{item.narrower}" >
                                        <rich:treeNode>
                                            <h:outputText value=" #{item.name}" />
                                            <rich:toolTip style="width: 350px;" styleClass="tooltip" showDelay="1000">
                                                <h:panelGrid>
                                                    <h:outputText styleClass="smallHeading" value="#{item.name}" />
                                                    <h:outputText value="#{item.definition}" escape="false" />
                                                </h:panelGrid>
                                            </rich:toolTip>
                                        </rich:treeNode>
                                    </rich:recursiveTreeNodesAdaptor>
                                </rich:tree>
                            </h:panelGroup>
                        </h:panelGrid>
                    </rich:tab>
                </rich:tabPanel>

                <h:panelGroup styleClass="dialogueButtons">
                    <h:commandLink id="lnkCloseConceptSelector" styleClass="dialogButton" value="#{msgs.CLOSE}" onclick="#{rich:component('mpConceptSelector')}.hide(); return false;" />
                </h:panelGroup>
            </h:panelGrid>
        </rich:modalPanel>
    </h:panelGroup>
</ui:composition>